<template>
  <Echart :options="props.options" :width="props.width" :height="props.height" />
</template>
<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue'
  import { statApi } from '@/seed-application/api'
  import { getAction } from '@/seed-application'
  import { Echart } from '@/components/Echart'
  import { EChartsOption } from 'echarts';

  export type PropsType = { actionName: string, seedName?: string, microName?: string, options: EChartsOption, width?: string|number, height?: string|number }
  const props = defineProps<PropsType>()
  const action = getAction(props.actionName, props.seedName, props.microName)
  // const stats = action.stats || action.seed.stats || {}
  const data = ref<Record<string, any>>()
  const loading = ref(false)

  // const options = computed(() :EChartsOption => {
  //   const labels = []
  //   const values = []
  //   for(const statName in stats) {
  //     const stat = stats[statName]
  //     labels.push(stat.label)
  //     values.push(data.value?.[statName] || '--')
  //   }
  //   return {
  //     xAxis: { type: 'category', data: labels },
  //     yAxis: { type: 'value' },
  //     series: [{data: values, type: 'bar'}]
  //   }
  // });

  onMounted(async () => {
    try {
      loading.value = true
      data.value = await statApi(action)
    } finally {
      loading.value = false
    }
  })
</script>
